import React from 'react';
import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react'
import axios from 'axios';
import { useHistory } from "react-router-dom";
import colldetailcss from './css/collectinsdetail.module.css'
function Index(props) {
    const history = useHistory();  
    const location = useLocation(); //获取跳转页面携带的值
    // console.log(location.state.typename);
    // console.log(location.state.titleimg);
    const [data, setdata] = useState([]);
    useEffect(async () => {
        await axios(`/yywd/collectionsdetail?typename=${location.state.typename}`).then((res) => {
            setdata(res.data);
            // console.log(res.data);
        })
    }, []);
    function routerTo(el) {
        history.push({
            pathname: `/collectionsinfo`,
            // state:{
            //     typename:el.typename,
            //     titleimg:el.titleimg
            // }
        })
    }
    return (
        <div className={colldetailcss.collections}>
            <div className={colldetailcss.container}>
                <div
                    className={colldetailcss.tittleimg}
                    style={{ backgroundImage: `url(${location.state.titleimg})` }}
                >
                    <div className={colldetailcss.mask}></div>
                    <h1>{location.state.typename}</h1>
                    <p>收藏</p>
                </div>
                <div className={colldetailcss.brandsbox}>
                    {data.map((el, index) => {
                        return <div className={colldetailcss.brandlist} key={index}>
                            <img src={el.brandimg} alt=""  onClick={()=>routerTo(el)}/>
                            <p>{el.brandtitle}</p>
                            <div className={colldetailcss.meta_container}>
                                <hr />
                                <div className={colldetailcss.meita_artilce}>
                                    <div className={colldetailcss.date}>{el.time}</div>
                                    <div className={colldetailcss.share}>
                                        <div className={colldetailcss.pinglun}>评论:{el.coments}</div>
                                        <div className={colldetailcss.dianzan}>点赞:{el.dianzan}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    })}
                </div>
            </div>
        </div>
    );
}

export default Index;